<template>
	<div class="main">
		<template v-if="config.popupType === 'dialog'">
			<Dialog
				:visible.sync="visible"
				:title="config.popupTitle"
				:close-on-click-modal="false"
				class="global-dialog global-dialog_center"
				lock-scroll
				:append-to-body="true"
				:width="config.popupWidth"
				@close="$emit('close')"
			>
				<Row
					class="global-common-search-box"
					:gutter="16"
				>
					<Form @submit.native.prevent>
						<Col :span="10">
							<FormItem :label="t('关键词')">
								<Input
									v-model="listQuery.keyword"
									placeholder="请输入关键词搜索"
									clearable
									class="search-input"
									@keyup.enter.native="search()"
								/>
							</FormItem>
						</Col>
						<Col :span="8">
							<FormItem>
								<Button
									type="primary"
									icon="el-icon-search"
									@click="search()"
								>
									{{t("查询")}}
								</Button>
								<Button
									icon="el-icon-refresh-right"
									@click="reset()"
								>
									{{t("重置")}}
								</Button>
							</FormItem>
						</Col>
					</Form>
				</Row>
				<McTable
					v-loading="listLoading"
					:data="list"
					has-c
					@selection-change="handleSelectionChange"
				>
					<TableColumn
						v-for="(item, i) in config.columnOptions"
						:key="i"
						:prop="item.value"
						:label="item.label"
					/>
				</McTable>
				<pagination
					v-if="config.hasPage"
					:page="listQuery.currentPage"
					:limit="listQuery.pageSize"
					:total="total"
					:pager-count="5"
					@pagination="initData"
				/>
				<template #footer>
					<span
						class="dialog-footer"
					>
						<Button @click="visible = false">{{ t("取消") }}</Button>
						<Button
							type="primary"
							:loading="btnLoading"
							@click="select()"
						>
							{{ t("确定") }}</Button>
					</span>
				</template>
			</Dialog>
		</template>
		<template v-if="config.popupType === 'drawer'">
			<Drawer
				ref="drawer"
				:visible.sync="visible"
				:title="config.popupTitle"
				:wrapper-closable="false"
				:size="config.popupWidth"
				:append-to-body="true"
				class="global-common-drawer"
				@close="$emit('close')"
			>
				<div class="global-flex-main">
					<Row
						class="global-common-search-box"
						:gutter="16"
					>
						<Form @submit.native.prevent>
							<Col :span="10">
								<FormItem :label="t('关键词')">
									<Input
										v-model="listQuery.keyword"
										placeholder="请输入关键词搜索"
										clearable
										class="search-input"
										@keyup.enter.native="search()"
									/>
								</FormItem>
							</Col>
							<Col :span="8">
								<FormItem>
									<Button
										type="primary"
										icon="el-icon-search"
										@click="search()"
									>
										{{ t("查询") }}
									</Button>
									<Button
										icon="el-icon-refresh-right"
										@click="reset()"
									>
										{{ t("重置") }}
									</Button>
								</FormItem>
							</Col>
						</Form>
					</Row>
					<McTable
						v-loading="listLoading"
						:data="list"
						has-c
						@selection-change="handleSelectionChange"
					>
						<TableColumn
							v-for="(item, i) in config.columnOptions"
							:key="i"
							:prop="item.value"
							:label="item.label"
						/>
					</McTable>
					<pagination
						v-if="config.hasPage"
						:page="listQuery.currentPage"
						:limit="listQuery.pageSize"
						:total="total"
						@pagination="initData"
					/>
					<div class="drawer-footer">
						<Button @click="visible = false">{{ t("取消") }}</Button>
						<Button
							type="primary"
							:loading="btnLoading"
							@click="select()"
						>
							{{ t("确定") }}
						</Button>
					</div>
				</div>
			</Drawer>
		</template>
	</div>
</template>

<script>
// import { getDataInterfaceDataSelect } from "@/api/systemData/dataInterface";
// import { mapGetters } from "vuex";
import {
	Button,
	Row,
	Col,
	Form,
	FormItem,
	Drawer,
	Input
} from 'element-ui';
import McTable from '../table';
import {t} from '../../utils/index.js';

export default {
	name:'SelectDialog',
	components:{
		McTable,
		Button,
		Row,
		Col,
		Form,
		FormItem,
		Drawer,
		Input
	},
	props:{
		config:{
			type:Object,
			default: () => {},
		},
		formData:Object,
		multiple:{
			type:Boolean,
			default:true,
		},
	},
	data(){
		return {
			t,
			visible:false,
			listLoading:true,
			btnLoading:false,
			listQuery:{
				keyword:'',
				currentPage:1,
				pageSize:20,
			},
			list:[],
			total:0,
			checked:[],
		};
	},
	computed:{
		// ...mapGetters(["userInfo"]),
	},
	methods:{
		init(){
			this.listQuery.keyword = '';
			this.listQuery.pageSize = this.config.hasPage
					? this.config.pageSize
					: 10000;
			this.visible = true;
			this.btnLoading = false;
			this.initData();
		},
		initData(){
			if(!this.config.interfaceId) return;
			this.listLoading = true;
			const paramList = this.getParamList();
			const columnOptions = this.config.columnOptions.map((o) => o.value);
			const query = {
				...this.listQuery,
				interfaceId:this.config.interfaceId,
				columnOptions:columnOptions.join(','),
				paramList,
			};
			// getDataInterfaceDataSelect(this.config.interfaceId, query)
			//     .then(res => {
			//         this.list = res.data.list;
			//         if (this.config.hasPage) this.total = res.data.pagination.total;
			//         this.listLoading = false;
			//     })
			//     .catch(() => {
			//         this.listLoading = false;
			//     });
		},
		getParamList(){
			const templateJson = this.config.templateJson;
			for(let i = 0; i < templateJson.length; i++){
				templateJson[i].defaultValue = this.formData[templateJson[i].relationField] || '';
				if(templateJson[i].identity === 'createUser'){
					templateJson[i].defaultValue = this.userInfo.userId;
				}
				if(templateJson[i].identity === 'createTime'){
					templateJson[i].defaultValue = new Date().getTime();
				}
				if(templateJson[i].identity === 'currOrganize'){
					templateJson[i].defaultValue = this.userInfo.organizeId;
				}
				if(templateJson[i].identity === 'currPosition'){
					if(this.userInfo.positionIds && this.userInfo.positionIds.length){
						const item = this.userInfo.positionIds[0];
						templateJson[i].defaultValue = item.id;
					}
				}
			}
			return templateJson;
		},
		select(){
			if(!this.checked.length) return;
			this.btnLoading = true;
			this.visible = false;
			const checked = [];
			for(let i = 0; i < this.checked.length; i++){
				const e = this.checked[i];
				const item = {};
				for(let j = 0; j < this.config.relationOptions.length; j++){
					const row = this.config.relationOptions[j];
					item[row.field] = row.type === 1
							? e[row.value]
							: row.value;
				}
				checked.push(item);
			}
			this.$emit('close');
			this.$emit('select', checked);
		},
		handleSelectionChange(val){
			this.checked = val;
		},
		search(){
			this.listQuery.currentPage = 1;
			this.listQuery.pageSize = this.config.hasPage
					? this.config.pageSize
					: 10000;
			this.initData();
		},
		reset(){
			this.listQuery.keyword = '';
			this.search();
		},
	},
};
</script>
<style
	lang="scss"
	scoped
>
::v-deep .el-dialog__body{
	height:70vh;
	padding:0 0 10px !important;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	.global-common-search-box{
		margin-bottom:0;
		.global-common-search-box-right{
			padding:10px 10px 0 0;
		}
	}
	.el-table{
		border-top:none !important;
	}
}
</style>